/**
   放大镜类
 */

// 定义一个名为GlassZoom的类
class GlassZoom {
  constructor(id) {
    this.root = document.querySelector(id);
    this.mask = this.root.querySelector(".mask"); //遮罩层
    this.showBox = this.root.querySelector(".show-box"); //显示图片showBox
    this.showBoxImg = this.root.querySelector(".show-box>img"); //左边大图
    this.bigPicBox = this.root.querySelector(".right img"); // 背景图片bigPicBox
    this.glass = this.root.querySelector(".right"); //放大镜
    this.lisEle = this.root.querySelectorAll("li"); //小图
    this.minPic = this.root.querySelector("li>img");
  }

  /**
   * 初始化放大镜比例
   */
  initScale() {
    // 图片的宽度
    let bigPicWidth =
      (this.glass.offsetWidth * this.showBox.offsetWidth) /
      this.mask.offsetWidth;
    let bigPicHeight =
      (this.glass.offsetHeight * this.showBox.offsetHeight) /
      this.mask.offsetHeight;

    this.bigPicBox.style.width = bigPicWidth + "px";
    this.bigPicBox.style.height = bigPicHeight + "px";
  }

  /**
   * 放大镜核心功能
   */
  moveGlass() {
    //移入显示
    this.showBox.addEventListener("mouseover", () => {
      this.mask.style.display = "block";
      this.glass.style.display = "block";
    });
    //移出隐藏
    this.showBox.addEventListener("mouseout", () => {
      this.mask.style.display = "none";
      this.glass.style.display = "none";
    });

   

    //移动遮罩层,随光标移动
    this.showBox.addEventListener("mousemove", (e) => {
      e = e || window.event;

      let x = e.offsetX - this.mask.offsetWidth / 2;
      let y = e.offsetY - this.mask.offsetHeight / 2;

      if (x < 0) {
        x = 0;
      }else if(x>this.showBox.offsetWidth - this.mask.offsetWidth){
        x = this.showBox.offsetWidth - this.mask.offsetWidth
      }

      if(y<0){
        y = 0
      }else if(y>this.showBox.offsetHeight - this.mask.offsetHeight){
        y  = this.showBox.offsetHeight - this.mask.offsetHeight
      }

      this.mask.style.left = x + "px";
      this.mask.style.top = y + "px";

      // 背景图片移动
      let moveX = (x * this.glass.offsetWidth) / this.mask.offsetWidth;
      let moveY = (y * this.glass.offsetHeight) / this.mask.offsetHeight;

      this.bigPicBox.style.left = -moveX + "px";
      this.bigPicBox.style.top = -moveY + "px";
    });
  }
  // 选项卡
  onChangePicn() {
    let _this = this;
    for (let i = 0; i < this.lisEle.length; i++) {
      this.lisEle[i].addEventListener("click", function () {
        //先清除所有的样式
        _this.clearActive();
        //在设置样式
        this.classList.add("active");

        //更改显示图片
        _this.showBoxImg.setAttribute("src", `../static/glass/show_${i + 1}.jpg`);
       
        //更改背景图
        _this.bigPicBox.setAttribute("src", `../static/glass/big_${i + 1}.jpg`);
      });
    }
  }

  // 清楚所有样式
  clearActive() {
    for (let i = 0; i < this.lisEle.length; i++) {
      this.lisEle[i].classList.remove("active");
    }
  }
}


let glassZoom = new GlassZoom("#glassone");
glassZoom.initScale();
glassZoom.moveGlass();
glassZoom.onChangePicn();
glassZoom.clearActive();
